<template>
   <div>
       <button @click="isShow=!isShow">显示/隐藏</button>
       <transition appear> <!-- appear初始就让他展示动画 -->
        <!-- <transition name="hello"> 如果起了名字下方使用不能叫.v了叫.hello -->
         <h1 v-show="isShow">你好啊！</h1>
       </transition>
      
   </div>
</template>

<script>
    export default {
        name:'Test',
        data(){
            return{
                isShow:true
         }
        },
    }
</script>

<style scoped>
   h1{
     background-color: orange;
   }
   /* 进入 */
   .v-enter-active{
       animation:identifier 1s;
   }
   /* 离开 */
   .v-leave-active{
       /* reverse 反转 */
       animation:identifier 1s reverse; 
   }
   @keyframes identifier {
       from{
           transform:translateX(-100%);
       }
       to{
           transform:translateX(0px);
       }
   }
</style>